import ScaleBox from 'react-scale-box';
import { BorderBox6,BorderBox7,BorderBox8 ,BorderBox12,BorderBox13,BorderBox10,Decoration10} from '@jiaminghi/data-view-react'
import LeftTopChart from '../charts/LeftTopChart';
import RightBottomChart from '../charts/RightBottomChart';
import CenterTopChart from '../charts/CenterTopChart';
import CenterBottomChart from '../charts/CenterBottomChart';
import RightTopChart from '../charts/RightTopChart';
import screenStyle from './screen.module.css';
import LeftCenterChart from '../charts/LeftCenterChart';
import LeftBottomChart from '../charts/LeftBottomChart';
function Screen() {
    return (
        <ScaleBox width={1920} height={1080}>
            <div className={screenStyle.screen}>
                {/* 你的页面内容 */}
                {/* 头部 start*/}
                <div className={screenStyle.screen_header}>数据大屏</div>
                <Decoration10 style={{width: '100%', height: '5px'}} />
                {/* 头部 end */}
                {/* 内容区 start */}
                <div className={screenStyle.screen_content}>
                    {/* 左侧内容区 start */}
                    <div className={screenStyle.content_left}>
                        <BorderBox7 className={screenStyle.left_top}>
                            <div className={screenStyle.screen_title}>左上标题</div>
                            <LeftTopChart />
                        </BorderBox7>
                        <BorderBox6 className={screenStyle.left_center}>
                            <div className={screenStyle.screen_title}>左中标题</div>
                            <LeftCenterChart />
                        </BorderBox6>
                        <BorderBox10 className={screenStyle.left_bottom}>
                            <div className={screenStyle.screen_title}>左下标题</div>
                            <LeftBottomChart />
                        </BorderBox10>
                    </div>
                    {/* 左侧内容区 end */}
                    {/* 中间内容区 start */}
                    <div className={screenStyle.content_center}>
                        <BorderBox8 className={screenStyle.center_top}>
                            <div className={screenStyle.screen_title}>中上标题</div>
                            <CenterTopChart />
                        </BorderBox8>
                        <BorderBox6 className={screenStyle.center_bottom}>
                            <div className={screenStyle.screen_title}>中下标题</div>
                            <CenterBottomChart />
                        </BorderBox6>
                    </div>
                    {/* 中间内容区 end */}
                    {/* 右侧内容区 start */}
                    <div className={screenStyle.content_right}>
                        <BorderBox13 className={screenStyle.right_top}>
                            <div className={screenStyle.screen_title}>右上标题</div>
                            <RightTopChart />
                        </BorderBox13>
                        <BorderBox12 className={screenStyle.right_bottom}>
                            <div className={screenStyle.screen_title}>右中标题</div>
                            <RightBottomChart />
                        </BorderBox12>
                    </div>
                    {/* 右侧内容区 end */}
                </div>
                {/* 内容区 end */}
            </div>
        </ScaleBox>
    )
}
export default Screen;